<!-- 功能区-法律大全页面 -->
<template>
	<view>
		<!-- 顶部搜索组件 -->
		<!-- <u-sticky index="search"><search placeholder="搜索法律名称" @change="seachChange"></search></u-sticky> -->
		<search placeholder="搜索法律名称" @change="seachChange"></search>
		<!-- 一下为初始内容展示区域 -->
		<!-- rab 栏 -->
		<u-sticky index="tabs">
			<u-tabs
				:show-bar="false"
				:list="list"
				font-size="30"
				active-color="#00C9B1"
				bg-color="#e7e7e7"
				gutter="20"
				bar-width="70"
				:current="current"
				@change="tabsChange"
			></u-tabs>
		</u-sticky>
		<!-- 具体的法律条款项区域 -->
		<block v-if="lawDataList.length < 1"><u-empty text="暂无数据记录" mode="data" margin-top="250"></u-empty></block>
		<block v-for="lawItem in lawDataList" :key="lawItem.id">
			<view class="law-item-box" @click="lawItemClick(lawItem.id)">
				<view class="title">{{ lawItem.title }}</view>
				<text class="time">{{ lawItem.publish_time }}</text>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 10,
				title: '', // 法律名称
				category_id: '' // 所属分类ID
			},
			// 顶部可选案件类型的数据列表
			list: [],
			// 当前选中项
			current: 0,
			// 法律条款项数据列表
			lawDataList: []
		};
	},
	async onLoad() {
		await this.getLegalCategory();
		this.getDataList();
	},
	async onPullDownRefresh() {
		this.sortData.page = 1;
		(this.sortData.title = ''), (this.sortData.category_id = ''), (this.lawDataList = []);
		await this.getDataList();
		uni.stopPullDownRefresh();
		this.$u.toast('页面数据已刷新');
	},
	onReachBottom() {
		this.sortData.page += 1;
		this.getDataList();
	},
	methods: {
		// 获取对应条件下的法律数据列表
		async getDataList() {
			this.sortData.category_id = this.list[this.current].id || '';
			const res = await this.$u.api.getLegalList(this.sortData);
			if(!res) return
			if(res.length < 1) return this.sortData.page = this.sortData.page < 2 ? 1 : (this.sortData.page - 1)
			this.lawDataList = [...this.lawDataList, ...res];
			// console.log(this.lawDataList);
		},
		// 获取法律大全分类
		async getLegalCategory() {
			const res = await this.$u.api.getLegalCategory();
			if (!res) return;
			this.list = [{ id: 0, name: '最新' }];
			let arr = JSON.stringify(res)
				.replace(/{/, '')
				.replace(/}/, '')
				.split(',');
			arr.forEach(item => {
				let tag = {
					id: item.replace(/"/g, '').split(':')[0],
					name: item.replace(/"/g, '').split(':')[1]
				};
				this.list.push(tag);
			});
			// console.log(this.list);
		},
		// 监听 seach 搜索框的内容改变事件（组件内部已做节流处理）
		seachChange(keyWord) {
			this.sortData.title = keyWord;
			this.sortData.page = 1;
			this.lawDataList = [];
			// 注：这里没有重置 tab 栏，欲为在该 tab 栏下搜索
			this.getDataList();
		},
		// tab 栏的点击切换事件
		tabsChange(index) {
			this.current = index;
			this.sortData.page = 1;
			this.lawDataList = [];
			this.getDataList();
		},
		lawItemClick(id) {
			this.$u.route({
				type: 'to', // 跳转方式
				url: '/myPackageA/pages/views/funBigLawDetails', // 跳转到法律条款详情页
				params: { id: id } // 携带的参数对象
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.law-item-box {
	width: 100%;
	padding: 30rpx 20rpx;
	border-bottom: 1px solid #999999;
	.title {
		font-size: 32rpx;
		font-weight: 500;
		color: #141418;
	}
	.time {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999999;
	}
}
</style>
